<template>
	<view class="main" style="overflow: hidden;">
		<u-navbar title="订单详情" :background="bc" title-color="#FFF" back-icon-color="#FFF" :border-bottom="false">
		</u-navbar>
		<view class="u-skeleton">
			<view class="ml30 mr30" style="padding-top: 40rpx;" v-if="loadingSkeleton">
				<view class="u-skeleton-fillet h-skeleton" style="width: 300rpx;"></view>
				<view class="u-skeleton-fillet h-skeleton mt20"></view>
				<view class="u-skeleton-fillet mt20" style="height: 200rpx;"></view>
			</view>
			<img src=".../../../static/background-image.png" style="position: absolute;top: 0;width: 100%;"
				mode="widthFix"></img>
			<view class="content-box p20">
				<!-- 内容 -->
				<view class="" style="padding: 20rpx 0 10rpx 10rpx;">
					<view v-if="orderInfo.auditStatus == 1">
						<view class="df aic">
							<nmr-icon name="daifukuan" size="54" color="#fff"></nmr-icon>
							<text class="cf fs36 ml10">待支付</text>
						</view>
						<view class="cf fs28 mt20">
							<text>剩</text>
							<u-count-down @end="orderDown" separator-color="#47A848" color="#47A848" class="ml15 mr16"
								:timestamp="timeupSecond"></u-count-down>
							<text>未支付订单将被取消</text>
						</view>

					</view>
					<view class="" v-else-if="orderInfo.auditStatus == 20">
						<view class="df aic">
							<nmr-icon name="a-daijiedan1" size="54" color="#fff"></nmr-icon>
							<text class="cf fs36 ml10">待收货</text>
						</view>
						<view class="cf fs28 mt20">
							您的商品正在配送中~
						</view>
					</view>
					<view class="" v-else-if="orderInfo.auditStatus == 30">
						<view class="df aic">
							<nmr-icon name="complete-fill" size="54" color="#fff"></nmr-icon>
							<text class="cf fs36 ml10">{{orderInfo.auditStatusName}}</text>
						</view>
						<view class="cf fs28 mt20">
							订单{{orderInfo.auditStatusName}}，期待您下次光临
						</view>
					</view>

					<view class="" v-else-if="orderInfo.auditStatus == '-1' || orderInfo.auditStatus == '-2'|| orderInfo.auditStatus == '-3'">
						<view class="df aic">
							<nmr-icon name="a-a-quxiao11" size="54" color="#fff"></nmr-icon>
							<text class="cf fs36 ml10">已取消</text>
						</view>
						<view class="cf fs28 mt20">
							
							{{orderInfo.auditStatus == '-1'?'您已取消了订单~':'订单已经取消~'}}
						</view>
					</view>
					<view class="" v-else>
						<view class="df aic">
							<nmr-icon name="peisong2" size="54" color="#fff"></nmr-icon>
							<text class="cf fs36 ml10">{{orderInfo.auditStatusName}}</text>
						</view>
						<view class="cf fs28 mt20">
							商家正在备货中,您的商品会尽快开始配送~
						</view>
					</view>
				</view>

				<view class="bgcf p30 bdr20  mt30" style="position: relative;">
					<view class="df aic jcsb mb30" style="position: relative;" v-if="orderInfo.shopPurOrderInfo">
						<view class="df aic">
							<nmr-icon name="dizhi2" color="#47A848" size="30"></nmr-icon>
							<view class="ml30">
								<view>
									<text style="color: #1D1D1D;"
										class="fs30 titleLabel">{{orderInfo.shopPurOrderInfo.getName}}</text>
									<text class="c6 fs26 ml20">{{orderInfo.shopPurOrderInfo.getPhone}}</text>
								</view>
								<view class="fs26 mt20 " style="color: #3D3D3D;">
									{{orderInfo.shopPurOrderInfo.getAddress}}{{orderInfo.shopPurOrderInfo.getAddressInfo}}
								</view>
							</view>
						</view>
					</view>
					<u-line color="#E5E5E5" />
					<view class="fs26 fwb tac mt30" style="color: #48A147;">
						发车时间： {{orderInfo.hopeTime}}
					</view>
				</view>
				<!-- 订单商品 -->
				<view class="">
					<orderCmdy @handlepayBtn="handlepayBtn" :orderPayType="orderPayType" :orderInfo="orderInfo"></orderCmdy>
				</view>
				<!-- 订单价格 -->
				<orderPrice @FeePrice="showFeePrice = true" @feeInfo="feeInfoShow = true" :orderInfo="orderInfo"></orderPrice>
				<!-- 订单明细 -->
				<orderDetails :orderInfo="orderInfo" class="mb30"></orderDetails>
			</view>
			<payBtn ref="payBtn" :orderPayType="orderPayType" @purOrderAudit="getOrderDetail" :orderInfo="orderInfo" :loading="loading" @handlesubmit="handlesubmit"></payBtn>
		</view>
		<u-skeleton :loading="loadingSkeleton" :animation="true" bgColor="#FFF"></u-skeleton>
		<ModalMsg width="680" v-model="feeInfoShow" title="配送费说明" :showCancel="false">
			<view class=" mt30 fs26 c3 p020 u-text-left" style="line-height: 60rpx;">
				<view class="">
					1、采购满平台设置的起送费后方可下单。
				</view>
				<view class="">
					2、配送费=基础配送费+超重配送费，例如：货物重量在<text class="app-theme">20kg</text>以内仅收取基础配送费<text class="price">8</text>元，超出部分，加收<text class="price">0.3</text>元/kg(不足<text class="app-theme">1</text>按<text class="app-theme">1</text>kg收取)。
				</view>
				<view class="">
					3、不同城市或者不同地址的基础配送费和加收费用可能不同，请以小程序的实际显示为准。
				</view>
			</view>
		</ModalMsg>
		<!-- <FeePricePopup :isAir="false" @feeInfo="feeInfoShow = true" :goodsList="orderInfo.shopPurOrderList" v-model="showFeePrice" :infoByAreaIdFee="infoByAreaIdFee" :platformFeeInfo="checkFeeInfo('')"></FeePricePopup> -->
	</view>
</template>

<script>
	let shouldContinue = true;
	import orderPrice from './components/orderPrice.vue'
	import orderDetails from './components/orderDetails.vue'
	import orderCmdy from './components/orderCmdy.vue'
	import navBg from "@/static/background-image.png"
	import payBtn from "./components/payBtn.vue"
	import {
		shopPurOrderInfo,
		
	} from '@/api/order.js'
	import ModalMsg from '@/components/ModalMsg.vue'
	import FeePricePopup from '../shopping/components/FeePricePopup.vue'
	let setIn = null
	
	import {
		getSysTime
	} from '@/utils/getSysTime'

	export default {
		components: {
			orderPrice,
			orderDetails,
			orderCmdy,
			payBtn,
			ModalMsg,
			FeePricePopup
		},
		data() {
			return {
				feeInfoShow:false,
				showFeePrice:true,
				loadingSkeleton: false,
				qrcodeData: '',
				timer: null,
				loading: false,
				timeupSecond: 0,
				status: 1,
				bc: {
					backgroundImage: `url(${navBg})`,
					backgroundSize: '100%',
					backgroundRepeat: 'no-repeat',
				},
				orderDetailData: [{
						label: '期望时间',
						value: '立即送达'
					},
					{
						label: '配送方式',
						value: '配送上门'
					},
					{
						label: '订单编号',
						value: '12546587954'
					},
					{
						label: '下单时间',
						value: '2023-06-21 12:34:12'
					},
					{
						label: '支付方式',
						value: '微信支付'
					},
					{
						label: '支付单号',
						value: '400022665222155555'
					},
					{
						label: '支付时间',
						value: '2023-06-21 12:34:12'
					},
				],
				orderId: '',
				type: '',
				hopeTimeCalc: '',
				orderInfo: {
					auditStatus: 0,
					orderChildList: [],
					memberOrderAddress: {},
					hopeTime:'',
					supplierList:[]
				},
				drawStatusList: {
					0: '待开奖',
					1: '中奖未确认',
					2: '中奖已确认',
					4: '已领取',
					'-1': '未中奖'
				},
				drawSetByOrderInfo: {},
				payImg: '',
				orderPayType:''



			}
		},
		onLoad(e) {
			console.log(e)
			this.orderId = e.id;
			this.orderPayType = e.orderPayType
		},
		onHide() {
			shouldContinue = false;
		},
		destroyed() {
			shouldContinue = false;
		},

		onShow() {
			this.getOrderDetail()
		},
		methods: {
			// 确认收货
			handlepayBtn(id){
				console.log(id,'==')
				this.$refs.payBtn.handleSubmitDf(30,id)
			},
			async timeup() {
				let nowDate = await getSysTime('0')
				var that = this;
				var time = (new Date(this.$moment(this.orderInfo.payLimitTime)).getTime()) - nowDate;
				that.timeupSecond = parseInt(time / 1000);
				console.log(that.timeupSecond,'that.timeupSecond')
			},
			// 倒计时结束触发
			orderDown() {
				uni.showToast({
					title: '订单暂未支付，已为您取消',
					icon:'none'
				})
				setTimeout(() => {
					uni.hideToast()
				}, 500)
				this.getOrderDetail()
			},
			async handlesubmit() {
				let priceInfo = {
					platformMoney: this.orderInfo.payMoney,
					sendMoney: this.orderInfo.sendMoney || 0,
					goodsMoney: this.orderInfo.platformMoney || 0,
				}
				uni.redirectTo({
					url: '/pages/confirm/payPage?orderId=' + this.orderInfo.shopPurOrderId + '&priceInfo=' +
						JSON
						.stringify(priceInfo)+'&szbankOpen='+this.orderInfo.szbankOpen
				})
			},
			getOrderDetail() {
				shopPurOrderInfo(this.orderId,this.orderPayType).then(res => {
					// console.log(res)
					if (res.code == 200) {
						if(this.orderPayType==4){
							res.data.supplierList = res.data.shopPurOrderRelatedList
						}else{
							res.data.supplierList = res.data.shopPurOrderList
						}
						
						this.orderInfo = res.data
						if (res.data.createTime&&res.data.auditStatus==1) {
							this.timeup(res.data.createTime)
						}
					}
					this.loadingSkeleton = false
				})
			},



		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-mode-center-box {
		background-color: transparent !important;
	}
/deep/ .u-card__body{
	padding-top: 0 !important;
}
	.titleLabel {
		font-weight: bold;
	}

	.main {
		width: 100%;
		min-height: 100vh;
		background: #f1f1f1;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}

	.price {
		color: #EF2929;
	}

	.content-box {
		position: relative;
	}

	.addressTag {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0 17rpx 0 17rpx;
		background: #47A848;
		font-size: 24rpx;
		font-family: PingFangSC-Regular-, PingFangSC-Regular;
		font-weight: normal;
		color: #FFFFFF;
		padding: 7rpx 16rpx;
	}

	.draw-box {
		margin: 20rpx 0;
		box-sizing: content-box;

		.draw-content {
			color: white;
			padding: 30rpx 20rpx;
			box-sizing: content-box;
		}

		.num {
			// padding: 10rpx;
			background: linear-gradient(90deg, #ED272A 0%, #FF7600 100%);
			margin: 0 auto;
			width: 78rpx;
			height: 78rpx;
			border: 4rpx solid #FFFFFF;
			font-size: 42rpx;
			border-radius: 50%;
			font-weight: bold;
			box-sizing: content-box;
		}
	}
</style>